<template>
  <!-- 首页个性化推荐 -- 推荐部分 -->
  <div class="hot-reco">
    <!-- 导航 -->
    <div class="nav">
      <div class="nav-left">
        <div class="bg">
          <a href="javascript:;">个性化推荐</a>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="content-item">
        <div class="date">
          <span class="week">星期六</span>
          <span class="day">9</span>
        </div>
        <!-- 蒙版 -->
        <a class="date-mask" href="jacascript:;" title="每日歌曲推荐"></a>
        <p class="hover">每日歌曲推荐</p>
        <p class="spec-1">根据你的口味生成，<br />每天6:00更新</p>
      </div>
      <div class="content-item">
        <img src="./img/2.jpg" />
        <!-- 图片的蒙版 -->
        <a class="mask" href="jacascript:;" title="私人雷达 | 根据听歌记录为你打造"></a>
        <div class="icon">
          <span></span>
          <span>66万</span>
          <a href="javascrpt:;"></a>
        </div>
        <p class="hover">私人雷达 | 根据听歌记录为你打造</p>
        <!-- 切换 -->
        <div class="item-wrap" @mouseenter="showBtn1 = !showBtn1" @mouseleave="showBtn1 = !showBtn1">
          <p class="spec-1 spec-2" v-show="!showBtn1">
            猜你喜欢
          </p>
          <div class="btn" v-show="showBtn1">不感兴趣</div>
        </div>
      </div>
      <div class="content-item">
        <img src="./img/1.jpg" />
        <!-- 图片的蒙版 -->
        <a class="mask" href="jacascript:;" title="全网最好听的歌单2022（推荐）"></a>
        <div class="icon">
          <span></span>
          <span>66万</span>
          <a href="javascrpt:;"></a>
        </div>
        <p class="hover">全网最好听的歌单2022（推荐）</p>
        <div class="item-wrap" @mouseenter="showBtn2 = !showBtn2" @mouseleave="showBtn2 = !showBtn2">
          <p class="spec-1 spec-2" v-show="!showBtn2">
            根据你喜欢的歌单《好听到单曲循环的神仙歌曲》推荐
          </p>
          <div class="btn" v-show="showBtn2">不感兴趣</div>
        </div>
      </div>
      <div class="content-item">
        <img src="./img/1.jpg" />
        <!-- 图片的蒙版 -->
        <a class="mask" href="jacascript:;" title="全网最好听的歌单2022（推荐）"></a>
        <div class="icon">
          <span></span>
          <span>66万</span>
          <a href="javascrpt:;"></a>
        </div>
        <p class="hover">全网最好听的歌单2022（推荐）</p>
        <div class="item-wrap" @mouseenter="showBtn3 = !showBtn3" @mouseleave="showBtn3 = !showBtn3">
          <p class="spec-1 spec-2" v-show="!showBtn3">
            根据你喜欢的歌单《好听到单曲循环的神仙歌曲》推荐
          </p>
          <div class="btn" v-show="showBtn3">不感兴趣</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "personal-recommend",
  data() {
    return {
      // 个性推荐 p与btn的切换
      showBtn1: false,
      showBtn2: false,
      showBtn3: false,
    };
  },
  methods: {
   
  },
};
</script>

<style scoped lang="scss">
.hot-reco {
  width: 730px;
  box-sizing: border-box;
  padding: 15px;
  // 导航
  .nav {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 35px;
    border-bottom: 2px solid #c10d0c;
    margin-bottom: 13px;
    .nav-left {
      display: flex;
      .bg {
        background: url("@/assets/index.png") no-repeat;
        background-position: -220px -154px;
        padding: 0 10px 0 34px;
        font-size: 20px;
        a {
          color: #333;
          margin: 0 15px 0 10px;
        }
      }
      a {
        text-decoration: none;
        color: #666;
      }
      span {
        margin: 0 10px;
        color: #ccc;
      }
    }
  }
  // 内容
  .content {
    // width: 100%;
    width: 699px;
    height: 280px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .content-item {
      width: 140px;
      height: 204px;
      position: relative;
      margin-top: 5px;
      // 切换包裹父类
      .item-wrap {
        width: 100%;
        height: 70px;
      }
      img {
        width: 100%;
        height: 140px;
      }
      // 个人推荐与热门推荐不同的部分
      .date {
        width: 140px;
        height: 140px;
        background: url("@/assets/date.png") no-repeat;
        background-position: 0 0;
        cursor: pointer;
        position: relative;
        .week {
          color: #fff;
          position: absolute;
          top: 7px;
          left: 50%;
          transform: translate(-50%, 0);
        }
        .day {
          color: #000;
          position: absolute;
          font-size: 90px;
          font-weight: bold;
          top: 40px;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
      // date的蒙版
      .date-mask {
        position: absolute;
        top: 33px;
        left: 0;
        width: 140px;
        height: 107px;
        z-index: 0;
        background: url("@/assets/date.png") no-repeat;
        background-position: 0 -150px;
      }
      .spec-1 {
        color: #999;
        font-size: 12px;
        line-height: 18px;
      }
      .spec-2 {
        margin-top: 15px;
      }
      .btn {
        width: 63px;
        height: 26px;
        background: url("@/assets/index.png") no-repeat;
        background-position: 0 -130px;
        color: #333;
        font-size: 12px;
        text-align: center;
        line-height: 26px;
        margin-top: 30px;
        cursor: pointer;
        &:hover {
          background-position: -70px -130px;
        }
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 140px;
        height: 140px;
        z-index: 0;
        background: url("@/assets/coverall.png") no-repeat;
        background-position: 0 0;
      }
      .icon {
        position: absolute;
        top: 113px;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 27px;
        line-height: 27px;
        color: #ccc;
        font-size: 12px;
        background: url("@/assets/coverall.png") no-repeat;
        background-position: 0 -537px;
        span {
          float: left;
        }
        span:nth-child(1) {
          width: 14px;
          height: 11px;
          background: url("@/assets/iconall.png") no-repeat;
          background-position: 0 -24px;
          margin: 8px 7px 0 10px;
        }
        a {
          float: right;
          width: 16px;
          height: 17px;
          background: url("@/assets/iconall.png") no-repeat;
          background-position: 0 0;
          margin: 5px 10px 0 0;
          &:hover {
            background-position: 0 -60px;
          }
        }
      }
      p {
        font-size: 14px;
        line-height: 18px;
        width: 100%;
        height: 24px;
        color: #333;
        &.hover {
          margin-top: 5px;
        }
        &.hover:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>